<template>
  <div id="art-item">
    <div class="cover-box">
      <div class="cover" @click="linkToDetail(art.id)">
        <img
          v-lazy="'http://172.17.147.23:8888/ipfs/' + art.cover_hash"
          alt="cover"
          v-if="art.cover_hash != null"
        />
        <div
          @click.stop="handelLike()"
          class="like"
          :class="{ 'like-active': art.iscolletion == 1 }"
        >
          <i class="iconfont icon-Love"></i>
        </div>
      </div>
    </div>
    <div class="info">
      <!-- 头像 -->
      <div
        class="user-info"
        @click="$router.push(`/user/${art.creator_address}`)"
      >
        <div class="avatar">
          <!-- 用户弹出框 -->
          <img
            :src="art.user_logo | ipfsHash"
            alt="avatar"
            v-if="art.user_logo != null"
          />
          <RandomAvatar
            :user_address="art.creator_address"
            v-if="art.user_logo == null"
          />
        </div>

        <!-- <div class="username">{{ art.user.username }}</div> -->
      </div>
      <div class="flex-box">
        <div class="art-name">{{ art.title }}</div>
        <div
          v-if="art.status == 'selling' && art.form_of_sale == '定价出售'"
          class="status-selling status-info"
        >
          正在售卖
        </div>
        <div
          v-if="art.status == 'selling' && art.form_of_sale == '拍卖'"
          class="status-auction status-info"
        >
          正在拍卖
        </div>
        <div v-if="art.status == 'sold'" class="status-sold status-info">
          未开售
        </div>
        <div v-if="art.status == 'audit'" class="status-sold status-info">
          待审核
        </div>
        <div v-if="art.status == 'success'" class="status-success status-info">
          审核成功
        </div>
        <div
          v-if="art.status == 'refushed'"
          class="status-refushed status-info"
        >
          审核失败
        </div>
      </div>
      <template v-if="type == 'selling'">
        <div class="art-price">
          <span v-if="art.form_of_sale == '拍卖'">起拍价 </span
          >{{ art.price | weiToEth }} ETH<i class="iconfont icon-ETH"></i>
        </div>

        <!-- 立即购买 -->
        <div
          class="buy-btn"
          v-if="type != 'myCollection' && art.form_of_sale == '定价出售'"
          @click="buyNow(art.id)"
        >
          立即购买
        </div>
        <div
          class="buy-btn"
          v-if="type != 'myCollection' && art.form_of_sale == '拍卖'"
          @click="linkToDetail(art.id)"
        >
          竞拍
        </div>
      </template>
      <!-- 审核成功-上架 -->
      <template v-if="art.status == 'success' && art.owner == $store.getters.user_address">
        <div>
          <div class="success-btn" @click="isShowSalePanel = true">上架</div>
        </div>
      </template>
      <!-- 未上架-二次售卖 -->
      <template v-if="art.status == 'sold' && art.owner == $store.getters.user_address">
        <div>
          <div class="success-btn" @click="isShowSalePanel = true">上架</div>
        </div>
      </template>
      <!-- 审核失败-拒绝 -->
      <template v-if="art.status == 'refushed'">
        <div>
          <div class="refushed-btn" @click="checkReason">详情</div>
        </div>
      </template>
      <template v-if="type == 'myCollection'">
        <!-- 移除合集 -->
        <div @click="removeItem(art.id)" class="remove-btn">移出合集</div>
      </template>
      <template v-if="type == 'my'">
        <!-- 移除合集 -->
        <div class="art-price" v-if="art.price != null">
          <span v-if="art.form_of_sale == '拍卖'">起拍价 </span
          >{{ art.price | weiToEth }} ETH<i class="iconfont icon-ETH"></i>
        </div>
      </template>
    </div>
    <!-- 插槽 -->
    <slot name="mask"></slot>
    <!-- 上架弹出框 -->
    <SalePanel
      :artDetail="art"
      v-if="isShowSalePanel"
      @close="isShowSalePanel = false"
    />
  </div>
</template>

<script>
import { collete, delArrayShop, queryreason, delShopByRefushed } from "@/api";
import { mapState } from "vuex";
import SalePanel from "./SalePanel";
export default {
  components: {
    SalePanel,
  },
  props: ["artData", "type"],
  watch: {
    artData: {
      immediate: true,
      handler(newValue) {
        this.art = newValue;
      },
    },
  },
  computed: {
    ...mapState({
      artDetail: (store) => store.artDetail.artDetail,
    }),
  },
  data() {
    return {
      art: {},

      // 是否展示上架面板
      isShowSalePanel: false,
    };
  },
  methods: {
    linkToDetail(id) {
      this.$router.push("/art/" + id);
    },
    removeItem(id) {
      this.$confirm("此操作将会移出合集, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        // 发起请求，删除
        let result = await delArrayShop(id);
        if (result.flag) {
          this.$message.success(result.msg);
          // 重新获取数据
          this.$emit("getCollectionDetail");
        } else {
          this.$message.error(result.msg);
        }
      });
    },
    buyNow(id) {
      this.$store.dispatch("artDetail", id).then(() => {
        if (this.artDetail.owner == this.$store.getters.user_address) {
          this.$message.error("不能购买自己拥有的艺术品");
          return;
        } else {
          this.$store.dispatch("showComfirmBuy", true);
        }
      });
    },

    // 收藏和取消收藏
    async handelLike() {
      let result = await collete({
        user_address: this.$store.getters.user_address,
        shop_id: this.art.id,
        type: "shop",
      });
      if (result.flag) {
        this.$message.success(result.msg);
        // 取消收藏
        if (this.art.iscolletion == 1) {
          this.art.iscolletion = 0;
        } else {
          this.art.iscolletion = 1;
        }
      } else {
        this.$message.error(result.msg);
      }
    },

    // 查看拒绝理由
    async checkReason() {
      let result = await queryreason(this.art.id);
      this.$confirm(result[0].reason, "具体原因", {
        confirmButtonText: "我已了解，确认删除",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        let res = await delShopByRefushed(this.art.id);
        if (res.flag) {
          this.$message({
            type: "success",
            message: res.msg,
          });
          // 刷新数据
          this.$store.dispatch("myNotOnSell", {
            pageIndex: "1",
            pageSize: "20",
            status: "审核失败",
          });
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
    },
  },
};
</script>

<style lang='less'>
#art-item:hover {
  box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.2s linear;
  .info {
    transform: translateY(-35px);
    transition: all 0.2s linear;
  }
  .status-info {
    display: block !important;
  }
}
#art-item {
  transition: all 0.2s linear;
  border-radius: 10px;
  margin-bottom: 20px;
  overflow: hidden;
  box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.05);
  position: relative;
  .cover-box {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    .cover {
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      overflow: hidden;
      position: relative;

      img {
        height: 200px;
      }
      .like:hover {
        background: var(--themeColor1);
      }
      .like {
        height: 34px;
        width: 34px;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: all 0.2s ease;
        position: absolute;
        cursor: pointer;
        // backdrop-filter: blur(10px);
        background: rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        padding: 8px;
        right: 10px;
        top: 10px;
        i {
          font-size: 16px;
          font-weight: bold;
          color: #eee;
        }
      }
      .like-active {
        background: var(--themeColor1) !important;
      }
    }
    .video {
      width: 100%;
      height: 100%;
    }
  }
  .info {
    padding: 0 15px;
    padding-bottom: 10px;
    background: #fff;
    border-radius: 10px;
    position: relative;
    transition: all 0.2s linear;
    .flex-box {
      height: 20px;
      margin-top: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .art-name {
        font-size: 16px;
      }
      .status-info {
        display: none;
        font-size: 12px;
        padding: 2px 6px;
        color: #fff;
        border-radius: 99px;
      }
      .status-selling {
        background: var(--themeColor4);
      }
      .status-sold {
        background: var(--themeColor2);
      }
      .status-auction {
        background: var(--themeColor1);
      }
      .status-success {
        background: var(--themeColor4);
      }
      .status-refushed {
        background: var(--themeColor1);
      }
    }

    .art-price {
      font-size: 14px;
      color: #666;
      margin-top: 10px;
      height: 15px;
      i {
        margin-left: 5px;
        color: var(--themeColor4);
      }
    }
    .user-info {
      display: flex;
      align-items: center;
      cursor: pointer;
      .avatar {
        z-index: 1;
        margin-top: -15px;
        width: 34px;
        height: 34px;
        padding: 2px;
        overflow: hidden;
        background: #fff;
        border-radius: 50%;
        img {
          border-radius: 50%;
          height: 100%;
          width: 100%;
          object-fit: cover;
        }
      }
      .username {
        font-size: 14px;
        margin-left: 5px;
      }
    }
    .art-introduce {
      margin-top: 5px;
      font-size: 14px;
      color: #666;
      display: -webkit-box; /**对象作为伸缩盒子模型展示**/
      -webkit-box-orient: vertical; /**设置或检索伸缩盒子对象的子元素的排列方式**/
      -webkit-line-clamp: 2; /**显示的行数**/
      overflow: hidden; /**隐藏超出的内容**/
    }
    .remove-btn {
      cursor: pointer;
      bottom: -22px;
      position: absolute;
      font-size: 12px;
      background: red;
      padding: 2px 6px;
      color: #fff;
      border-radius: 99px;
    }
    .buy-btn {
      background: linear-gradient(
        to bottom,
        var(--themeColor1) 60%,
        var(--themeColor2) 100%
      );
      -webkit-background-clip: text;
      -moz-background-clip: text;
      background-clip: text;
      color: transparent;
      border-radius: 99px;
      cursor: pointer;
      bottom: -20px;
      position: absolute;
      font-size: 14px;
      width: 100%;
    }
    .selling-btn {
      cursor: pointer;
      bottom: -20px;
      position: absolute;
      font-size: 14px;
    }
    .success-btn {
      cursor: pointer;
      bottom: -20px;
      position: absolute;
      font-size: 14px;
      color: var(--themeColor4);
    }
    .refushed-btn {
      cursor: pointer;
      bottom: -20px;
      position: absolute;
      font-size: 14px;
      color: var(--themeColor1);
    }
  }
  .cover-mask {
    z-index: -1;
    position: absolute;
    // filter: blur(10px) brightness(0.5);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    img {
      object-fit: cover;
    }
  }
}
</style>